<template>
	<el-main>

		<el-row :gutter="15">
			<el-col :lg="8">
				<el-card shadow="never">
					<scEcharts height="500px" :option="option"></scEcharts>
				</el-card>
			</el-col>
			<el-col :lg="8">
				<el-card shadow="never">
					<scEcharts height="700px" :option="option2"></scEcharts>
				</el-card>
			</el-col>
			<el-col :lg="8">
				<el-card shadow="never">
					<scEcharts height="700px" :option="option3"></scEcharts>
				</el-card>
			</el-col>
			<el-col :lg="8">
				<el-card shadow="never">
					<template #header>
						<el-statistic title="工资支出/元" :value="salaryTotal" precision="3"></el-statistic>
					</template>
					<el-descriptions title="车间概况 信息" :column="1" border>
						<el-descriptions-item v-for=" (val, key) in salary" :key="key" :label="val.process_name" width="150px">
							<div>{{val.procedure_name}}</div>
							<div>数量：{{val.number}}</div>
							<div>单价：{{val.price}}</div>
							<div>小计：{{val.money}}</div>
						</el-descriptions-item>
					</el-descriptions>
				</el-card>
			</el-col>
			<el-col :lg="8">
				<el-card shadow="never">
					<scEcharts height="300px" :option="option4"></scEcharts>
				</el-card>
			</el-col>
			<el-col :lg="8">
				<el-card shadow="never">
					<scEcharts height="300px" :option="option5"></scEcharts>
				</el-card>
			</el-col>
			<el-col :lg="8">
				<el-card shadow="never">
					<scEcharts height="300px" :option="option6"></scEcharts>
				</el-card>
			</el-col>
		</el-row>
	</el-main>
</template>

<script>
	import scEcharts from '@/components/scEcharts';

	/**
	 * 引入组件 @/components/scEcharts
	 * 组件内部会自动加载主题 @/components/scEcharts/echarts-theme-T.js
	 * 支持props包括 height，width，option
	 * 组件export百度Echarts所有方法，使用方式: new scEcharts[fun]
	 */

	export default {
		name: 'chart',
		components: {
			scEcharts
		},
		data() {
			return {
				out_stock: [], //今日出货
				in_stock: [], //今日打包
				salary: [], //车间
				salaryTotal: 0,
				option: {
					title: {
						text: '工厂发货',	
					},
					grid: {
						// top: '80px'
					},
					tooltip: {
						trigger: 'item'
					},
					xAxis: {
						type: 'category',
						data: [],
						axisLabel : {//坐标轴刻度标签的相关设置。
			                formatter: function (value) {
				                // 将文本按空格分割成数组，然后使用map函数和substring将每个字符串截取为5字一行
				                var result = '';
				                var words = value.split('');
				                words.forEach(function (word) {
				                    if (result.length > 0 && result.length % 4 === 0) {
				                        result += '\n'; // 每5个字后换行

				                    }
				                    result += word;
				                    result += ''; // 添加空格作为分隔符
				                });
				                return result;
				            },
				            textStyle: {
				            	color: "black",
				            	fontSize: "12px",
				            	// lineHeight: "15px"
				            }
			            }
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: [],
						type: 'bar',
					}]
				},
				option2: {
					title: {
						text: '工厂打包入库',
					},
					grid: {
						//top: '80px'
					},
					tooltip: {
						trigger: 'axis'
					},
					xAxis: {
						type: 'category',
						data: [],
						axisLabel : {//坐标轴刻度标签的相关设置。
			                formatter: function (value) {
				                // 将文本按空格分割成数组，然后使用map函数和substring将每个字符串截取为5字一行
				                var result = '';
				                var words = value.split('');
				                words.forEach(function (word) {
				                    if (result.length > 0 && result.length % 4 === 0) {
				                        result += '\n'; // 每5个字后换行

				                    }
				                    result += word;
				                    result += ''; // 添加空格作为分隔符
				                });
				                return result;
				            },
				            textStyle: {
				            	color: "black",
				            	fontSize: "12px",
				            	// lineHeight: "15px"
				            }
			            }
					},
					yAxis: {
						type: 'value'
					},
					series: []
				},
				option3: {
					title: {
						text: '车间概况',
						subtext: '两指缩放'
					},
					grid: {
						top: '80px'
					},
					tooltip: {
						trigger: 'axis'
					},
					xAxis: {
						type: 'category',
						data: [],
						axisLabel : {//坐标轴刻度标签的相关设置。
			                formatter: function (value) {
				                // 将文本按空格分割成数组，然后使用map函数和substring将每个字符串截取为5字一行
				                var result = '';
				                var words = value.split('');
				                words.forEach(function (word) {
				                    if (result.length > 0 && result.length % 2 === 0) {
				                        result += '\n'; // 每5个字后换行

				                    }
				                    result += word;
				                    result += ''; // 添加空格作为分隔符
				                });
				                return result;
				            },
				            textStyle: {
				            	color: "black",
				            	fontSize: "12px",
				            	// lineHeight: "15px"
				            }
			            }
					},
					yAxis: {
						type: 'value'
					},
					series: [],
					dataZoom: [{ // 这是一个内置型数据区域缩放组件
				        type: 'inside', // 内置型数据区域缩放组件
				        start: 0, // 数据窗口范围的起始百分比
				        end: 100 // 数据窗口范围的结束百分比
				    }]
				},
				option4: {
					title: {
						text: 'Pie Demo',
						subtext: '基础饼图',
					},
					tooltip: {
						trigger: 'item'
					},
					series: [
						{
							name: '访问来源',
							type: 'pie',
							radius: ['40%', '70%'],
							center: ['50%', '60%'],
							label: false,
							data: [
								{value: 1048, name: '搜索引擎'},
								{value: 735, name: '直接访问'},
								{value: 580, name: '邮件营销'},
								{value: 484, name: '联盟广告'},
								{value: 300, name: '视频广告'}
							]
						}
					]
				},
				option5: {
					title: {
						text: 'Kline Demo',
						subtext: '基础K线图',
					},
					grid: {
						top: '80px'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross'
						}
					},
					xAxis: {
						data: ['2017-10-23', '2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27', '2017-10-28', '2017-10-29', '2017-10-30'],
					},
					yAxis: {
						scale: true,
					},
					series: [{
						type: 'k',
						data: [
							[2213.19,2199.31,2191.85,2224.63],
							[2203.89,2177.91,2173.86,2210.58],
							[2170.78,2174.12,2161.14,2179.65],
							[2179.05,2205.5,2179.05,2222.81],
							[2212.5,2231.17,2212.5,2236.07],
							[2227.86,2235.57,2219.44,2240.26],
							[2242.39,2246.3,2235.42,2255.21],
							[2246.96,2232.97,2221.38,2247.86]
						]
					}]
				},
				option6: {
					title: {
						text: 'Gauge Demo',
						subtext: '基础仪表盘',
					},
					series: [{
						center: ['50%', '60%'],
						type: 'gauge',
						anchor: {
							show: true,
							showAbove: true,
							size: 20,
							itemStyle: {
								borderWidth: 5
							}
						},
						progress: {
							show: true
						},
						data: [{
							value: 70
						}]
					}]
				}
			}
		},
		mounted() {
			this.getChart()
		},
		methods: {
			async getChart() {
				var res = await this.$API.chart.charts.get()
				if (res.code == 200) {
					this.out_stock = res.out_stock
					this.outStock()
					this.in_stock = res.in_stock
					this.inStock()
					this.salary = res.salary_data
					this.showSalary()
					this.totalSalary()
				}
			},
			outStock() {
				this.option.xAxis.data = []   // 分类  货品名称
				this.option.series = []

				var data = []
				for (var i in this.out_stock) {
					this.option.xAxis.data.push(this.out_stock[i].sku_text)
					data.push(this.out_stock[i].stock)
				}
				this.option.series.push({
					data: data,
					type: 'bar',
					
				});
			},
			inStock() {
				this.option2.xAxis.data = []   // 分类  货品名称
				this.option2.series = []

				var data = []
				for (var i in this.in_stock) {
					this.option2.xAxis.data.push(this.in_stock[i].sku_text)
					data.push(this.in_stock[i].stock)
				}
				this.option2.series.push({
					data: data,
					type: 'bar',
					
				});
			},
			showSalary() {
				this.option3.xAxis.data = []   // 分类  货品名称
				this.option3.series = []

				var data = []
				for (var i in this.salary) {
					this.option3.xAxis.data.push(this.salary[i].procedure_name + ' '+ this.salary[i].process_name)
					data.push(this.salary[i].number)
				}
				this.option3.series.push({
					data: data,
					type: 'bar',
					
				});
			},
			totalSalary() {
				for (var i in this.salary) {
					this.salaryTotal += parseFloat(this.salary[i].money)
				}
			}

		}
	}
</script>

<style>
</style>
